<template>
    <div class="dataBaseImformation">
        <el-row class="dataBaseTitle-box">
            <el-col :span="24" class="dataBaseLineHeiht">
                <p class="title" style="text-align: center;">连接数与会话信息 </p>
            </el-col>
        </el-row>
        <el-row class="dataBaseLine-box">
            <el-col :span="12" class="dataBaseLineHeiht">
                <p class="item">
                    活动会话数：{{this.dbData.ACTIVE_SESSION? this.dbData.ACTIVE_SESSION : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="4" class="dataBaseLineHeiht">
                <p class="item" style="padding-top: 15%;">
                    {{this.dbData.ACTIVE_SESSION? this.dbData.ACTIVE_SESSION : " "}}
                </p>
            </el-col> -->
            <el-col :span="11" class="dataBaseLineHeiht" style="border-left:2px solid rgb(4, 44, 119);">
                <p class="item">
                    会话使用率:{{this.dbData.SESSPCT? (this.dbData.SESSPCT *100).toFixed(1) + ' %' : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="3" class="dataBaseLineHeiht">
                <p class="item" style="padding-top: 15%;">
                    {{this.dbData.SESSPCT? (this.dbData.SESSPCT *100).toFixed(1) + ' %' : " "}}
                </p>
            </el-col> -->
        </el-row>
        <el-row class="dataBaseLine-box">
            <el-col :span="12" class="dataBaseLineHeiht">
                <p class="item">
                    会话数:{{this.dbData.ALL_SESSION? this.dbData.ALL_SESSION : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="6" class="dataBaseLineHeiht">
                <p class="item" style="padding-top: 15%;">
                    {{this.dbData.ALL_SESSION? this.dbData.ALL_SESSION : " "}}
                </p>
            </el-col> -->
            <el-col :span="12" class="dataBaseLineHeiht" style="border-left:2px solid rgb(4, 44, 119);">
                <p class="item">
                    进程使用率:{{this.dbData.PROCPCT? (this.dbData.PROCPCT * 100).toFixed(1) + ' %' : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="4" class="dataBaseLineHeiht">
                <p class="item" style="padding-top: 15%;">
                    {{this.dbData.PROCPCT? (this.dbData.PROCPCT * 100).toFixed(1) + ' %' : " "}}
                </p>
                
            </el-col> -->
        </el-row>
        <el-row class="dataBaseTitle-box">
          <el-col :span="24" class="dataBaseLineHeiht">
              <p class="title" style="text-align: center;">统计概要(%)</p>
          </el-col>
        </el-row>
        <el-row class="dataBaseLine-box">
            <el-col :span="10" class="dataBaseLineHeiht">
                <p class="item">
                    ping命中率:{{this.dbData.BUFFERHIT? (this.dbData.BUFFERHIT *100).toFixed(1)  : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="3" class="dataBaseLineHeiht">
                <p class="item-info" style="padding-top: 15%;">
                    {{this.dbData.BUFFERHIT? (this.dbData.BUFFERHIT *100).toFixed(1)  : " "}}
                </p>
            </el-col> -->
            <el-col :span="14" class="dataBaseLineHeiht" style="border-left:2px solid rgb(4, 44, 119);">
                <p class="item">
                    话句执行命中率:{{this.dbData.EXECPARSE? (this.dbData.EXECPARSE *100).toFixed(1) : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="4" class="dataBaseLineHeiht">
                <p class="item-info" style="padding-top: 15%;">
                    {{this.dbData.EXECPARSE? (this.dbData.EXECPARSE *100).toFixed(1) : " "}}
                </p>
            </el-col> -->
        </el-row>
        <el-row class="dataBaseLine-box">
            <el-col :span="10" class="dataBaseLineHeiht">
                <p class="item">
                    Latch命中率:{{this.dbData.LATCHHIT? (this.dbData.LATCHHIT *100).toFixed(0) : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="2" class="dataBaseLineHeiht">
                <p class="item-info" style="padding-top: 15%;">
                    {{this.dbData.LATCHHIT? (this.dbData.LATCHHIT *100).toFixed(0) : " "}}
                </p>
            </el-col> -->
            <el-col :span="14" class="dataBaseLineHeiht" style="border-left:2px solid rgb(4, 44, 119);">
                <p class="item">
                    非解析CPU时间比:{{this.dbData.NONPARSECPU? (this.dbData.NONPARSECPU *100).toFixed(0) : " "}}
                </p>
            </el-col>
            <!-- <el-col :span="2" class="dataBaseLineHeiht">
                <p class="item-info" style="padding-top: 15%;">
                    {{this.dbData.NONPARSECPU? (this.dbData.NONPARSECPU *100).toFixed(0) : " "}}
                </p>
            </el-col> -->
        </el-row>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'dbpanlinfo',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            selectedMonID: {},
            dbData: {},
            osData: {},
            timerName: 'DataBaseImformation',
            timerEventName: 'timerDataBaseImformation',
            timerInterval: 1000 * 30,
        }
    },
    created() {
        bus.$on('selectedMonID', msg => {
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
            this.getData();
            if (this.selectedMonID.hasOwnProperty('selectedOSMonID')) {
                this.getOSData(this.selectedMonID.selectedOSMonID);
            }
        });
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
                if (this.selectedMonID.hasOwnProperty('selectedOSMonID')) {
                    this.getOSData(this.selectedMonID.selectedOSMonID);
                }
            }
        });
        
    },
    mounted() {

    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                this.dbData = {};
                if (res.data.length > 0) {
                    this.dbData = res.data[0];
                }
            });
        },
        getOSData(osMonID) {
            fetchData({
                postData : JSON.stringify({
                    opera: 'dbConnect',
                    curPage: 1,
                    pageSize: 20,
                    sort: {
                        sortColumn: '',
                        sortOrders: ''
                    },
                    filtersType: 'fuzzyquery',
                    filters: {
                        "monid": osMonID
                    },
                })
            }).then((res) => {
                this.osData = {};
                if (res.data.length > 0) {
                    this.osData = res.data[0];
                }
            });
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>

@media screen and (max-width: 1365px) and (min-width: 1280px) {
   .dataBaseLineHeiht .title {
       font-size: 16px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 8px;
   }
    .dataBaseLineHeiht .item-info {
       font-size: 8px !important;
   }
 
}
@media screen and (max-width: 1600px) and (min-width: 1365px) {
   .dataBaseLineHeiht .title {
       font-size: 16px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 8px !important;
   }
    .dataBaseLineHeiht .item-info {
       font-size: 8px !important;
   }
}
@media screen and (max-width: 1778px) and (min-width: 1600px) {
  .dataBaseLineHeiht .title {
       font-size: 18px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 10px !important;
   }
    .dataBaseLineHeiht .item-info {
       font-size: 10px !important;
   }
}
@media screen and (max-width: 1920px) and (min-width: 1778px) {
   .dataBaseLineHeiht .title {
       font-size: 18px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 12px !important;
   }
   .dataBaseLineHeiht .item-info {
       font-size: 12px !important;
   }
   
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
     .dataBaseLineHeiht .title {
       font-size: 20px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 14px !important;
   }
}
@media screen and (min-width: 2560px) {
   .dataBaseLineHeiht .title {
       font-size: 22px;
   } 
   .dataBaseLineHeiht .item {
       font-size: 16px !important;
   }
}
.dataBaseImformation{
    padding: 0px 2px;
    height: calc(100% - 22px - 8px);
    text-align: center;
    color: aliceblue;
}
.dataBaseTitle-box{
    text-align: center;
    font-size: larger;
    height: 18%;
    overflow: hidden;
}
.dataBaseLine-box{
    /* text-align: center; */
    /* font-size: smaller; */
    height: calc((100% - 32%) / 4);
    border: 1px solid rgb(4, 44, 119);
    overflow: hidden;
}
.dataBaseLineHeiht{
    height: 100%;
    overflow: hidden;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left:10px;

}


.basicImformation{
    background-color: rgba(0, 0, 0, 0);
}
</style>    